import React from "react";
import { RouteRowState } from "./routes";
import { Navigate } from "react-router-dom";
import { useSelector } from "react-redux/es/hooks/useSelector";
interface PropsType {
  route: RouteRowState;
}

const BeforeEach: React.FC<PropsType> = ({ route }) => {
  // 拦截
  // 1. 未登录  => token 不存在
  // 		1-1 访问登录页面   => 正常访问
  //    1-2 访问非登录页面 => 跳转登录页面
  // 2. 已登录  => token 存在
  // 		2-1 访问登录页面  => 跳转首页
  //    2-2 访问非登录页面
  //  		2-2-1 查询该用户是否有访问权限
  //      有 正常访问   没有 跳转403页面， 并提示没有权限访问
  document.title = route.title || "后端管理系统";
  // 获取token
  const token = useSelector((state: any) => state.user.token);
  const role = useSelector((state: any) => state.user.role);
  // 白名单页面 => 免登陆页面
  // 如登录页面， 不需要登录权限
  const whiteList = ["/login"];
  if (!token) {
    if (whiteList.includes(route.path)) {
      return <div>{route.element}</div>;
    } else {
      return <Navigate to="/login"></Navigate>;
    }
  } else {
    if (whiteList.includes(route.path)) {
      return <Navigate to="/"></Navigate>;
    } else {
      if (!route.role || route.role.includes(role)) {
        return <div>{route.element}</div>;
      } else {
        return <div>403!!!!, 非常遗憾，没有权限访问</div>;
      }
    }
  }
};

export default BeforeEach;
